<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            margin: 100px;
            position: relative;
        }
        input{
            border: 1px solid #999;
            outline: 0;
            width: 140px;
            height: 30px;
            line-height: 30px;
            text-indent: 36px;
            border-radius: 5px;
            transition: all .3s;
        }
        span.title{
            position:absolute;
            height: 30px;
            line-height: 30px;
            left: 2px;
            top:2px;
            transition: all .3s;
        }
        input:focus,input:hover{
            text-indent: 2px;
        }
        input:focus+.title,input:hover+.title{
            transform: translateX(-120%);
        }
        input:valid~label.wc::after{content: "你的邮件格式正确";}
        input:invalid~label.wc::after{content: "你的邮件格式错误";}
        input:valid{border: 1px solid green;}
        input:invalid{border:1px solid red;}
        .error-message{color: red;font-size: 12px;text-indent: 108px;}
    </style>
</head>
<body>
    <div style="width: 100px;height: 100px;border: 1px solid black;padding: 5px;">
        默认content-box;ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
    </div>
    <div style="width: 100px;height: 100px;box-sizing: border-box;border: 1px solid black;padding: 5px;">
        设置为border-box;ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
    </div>
    <!-- <form action="" method="post" enctype="multipart/form-data" autocomplete="on"> -->
        <!-- <input type="file">    
        <label for="">用户名</label>
        <input type="text" name="user" placeholder="请输入用户名" pattern="^\d{4}" required autofocus oninput="checkValue(this)"/>

        <label for="">工号</label>
        <input type="text" placeholder="请输入工号" pattern="^\d{5}[wdy]$">

         <input type="text" name="" id="" list="tips">
         <dataList id="tips">
             <option value="wdy"></option>
             <option value="fuck"></option>
             <option value="shit"></option>
             <option value="beach"></option>
         </dataList>    -->

         <!-- <label for="man">男</label>
         <input type="radio" name="sex" id="man" required maxlength="5">
         <label for="woman">女</label>
         <input type="radio" name="sex" id="woman"  required>    -->
        <!-- <input type="submit" formnovalidate> -->
        <!-- <input type="submit"> -->

        <!-- <input type="search" id="search" value="">
        <input type="number" id="numbers"> -->
         
        <!-- checkValidity()方法介绍及演示 -->
        <!-- 如果元素没有满足他的所有验证条件，则返回false，否则返回true -->
        <!-- <input type="email" id="email" value="fdsf"> -->

        <!-- setCustomValidity()方法介绍及演示 -->
        <!-- 设置自定义的验证信息，用于即实施的验证定义覆盖原定义的信息 -->
    <!-- </form> -->

    <!-- <div class="container">
        <form action="">
            <input type="name" required><label for="">名称</label>
            <input type="email" required><label for="">邮箱</label>
            <input type="tel"><label for="">手机</label>
            <input type="url"><label for="">网址</label>
            <select name="#" id="">
                <option value="1">非必填选项一</option>
                <option value="2">非必填选项二</option>
                <option value="3">非必填选项三</option>
                <option value="4">非必填选项四</option>
            </select>
            <textarea name="" id="" cols="30" rows="10" required placeholder="留言（必填）"></textarea>
            <input type="submit" value="提交表单">
        </form>
    </div> -->
    <div class="container">
        <input type="email" id="mail" required placeholder="输入邮箱">
        <span class="title">邮箱</span>
        <label for="mail" class="wc"></label>
    </div>
    
    <form action="" class="myform" method="post" id="forms"> 
        <label for="UserName">手机号</label>
        <input type="text" name="UserName" id="UserName" placeholder="请输入手机号码" pattern="^1[0-9]{10}$" 
        required oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('手机输入有问题')">
        <label for="Password">密码</label>
        <input type="password" id="Password" placeholder="6~20位" pattern="^[a-zA-Z0-9]\w{5,19}$" 
        required onchange="checkp()" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('手机输入有问题')">
        <label for="Repassword">确认密码</label>
        <input type="password" id="Repassword" placeholder="确认密码" required onchange="checkp()" >
        <label for="Repassword">了解方式</label>
        <select name="" id="" required>
            <option value="">==请选择==</option>
            <option value="1">搜索引擎</option>
            <option value="2">朋友圈</option>
            <option value="3">广告投放</option>
            <option value="4">杀人</option>
        </select>
        <input type="submit" value="提交确认" id="submit">
    </form>

    <script>
        var form = document.getElementById("forms")
        replaceInvalidityUi(form)
        // 1,阻止默认气泡的产生
        function replaceInvalidityUi(form){
            form.addEventListener("invalid",function(e){
                console.log('a')
                e.preventDefault()
            },true)
            form.addEventListener("submit",function(e){
                if(!this.checkValidity()){
                    console.log('b')
                    e.preventDefault()
                }
            },true)

            document.getElementById("submit").addEventListener("click",function(e){
                var invalidField = form.querySelectorAll(":invalid"),
                errormsg = form.querySelectorAll(".error-message"),
                parent;
                for(var i=0;i<errormsg,length;i++){
                    // 删除错误信息
                    errormsg[i].parentNode.removeChild(errormsg[i])
                }
                // 添加新的错误信息
                for(var i=0;i<invalidField.length;i++){
                    parent = invalidField[i].parentNode;
                    parent.insertAdjacentHTML("beforeend","<div class='error-message'>"+
                    invalidField[i].validationMessage+"</div>")
                }
                if(invalidField.length>0){
                    invalidField[0].focus()
                }
            })
        }
        function checkp(){
            var p1 = document.getElementById("Password"),p2 = document.getElementById("Repassword");
            if(p1.value != p2.value){
                p2.setCustomValidity("密码不一致！")
            }else{
                p2.setCustomValidity("")
            }
        }


        function checkValue(obj){
            let it = obj.validity
            // console.log(obj.validity)
            if(true === it.valueMissing){
                obj.setCustomValidity("为空了，操！")
            }else{
                if(true === it.patternMismatch){
                    obj.setCustomValidity("写的有问题，操！")
                }else{
                    obj.setCustomValidity("终于写好了！")
                }
            }
        }
        // var usr = document.getElementById('man')
        // console.log(numbers.validity)

        // if(email.checkValidity()){
        //     alert("是一个邮箱")
        // }else{
        //     alert("不是一个邮箱")
        // }
    </script>
</body>
</html>